<template>
	<div>
		<el-row>
			<el-col :span="24" class="banner">
				<div class="left">{{topData.classname}} | {{topData.assignmentname}}</div>
                <div class="right">
                    <span>作业总题数：{{topData.assignmentnums}}</span>
                    <span>作业总人数：{{topData.studentnums}}</span>
                    <span>已交人数：{{topData.submit}}</span>
                    <span>未交人数：{{topData.unsubmit}}</span>
                </div>				
			</el-col>
            <el-col :span="24" class="header">
				<div class="top">
                    <span>{{topData.Htruenums}}</span>/{{topData.assignmentnums}}
                    <div>
                        <i class="top_logo"></i>
                        <span>最高成绩</span>
                    </div>
                </div>
                <div class="middle">
                    <span>{{topData.ave_truenums}}</span>/{{topData.assignmentnums}}
                    <div>
                        <i class="middle_logo"></i>
                        <span>平均成绩</span>
                    </div>
                </div>
                <div class="low">
                    <span>{{topData.Ltruenums}}</span>/{{topData.assignmentnums}}
                    <div>
                        <i class="low_logo"></i>
                        <span>最低成绩</span>
                    </div>
                </div>
			</el-col>	
			<el-col :span="24" class="content">
                <header>
                    <div>学生</div>
                    <div>
                        状态
                        <el-radio-group v-model="radio">
                            <el-radio :label="1">全部</el-radio>
                            <el-radio :label="2">已交</el-radio>
                            <el-radio :label="3">未交</el-radio>
                        </el-radio-group>
                    </div>
                    <div>成绩</div>
                </header>
                <ul>
                    <li v-for="item in stuList">
                        <div>{{item.studentname}}</div>
                        <div><span :class="{'active':item.type}">{{item.type ? '已交':'未交'}}</span></div>
                        <div>{{item.truenums}}/{{item.assignmentnums}}</div>
                    </li>
                    <li v-if="stuList.length==0">{{ radio==2?'暂没有学生提交作业':'所有学生均已提交作业' }}</li>
                </ul>
            </el-col>  	
			<div class="totast" v-show="showTotast">{{ totastMsg }}</div>		
		</el-row>
	</div>
</template>

<script>
	import api from '../../api';
	import { API_ROOT } from '../../util/config'
	import { getStore, setStore } from '../../util/util'
	import { mapState, mapMutations } from 'vuex'
	import Vue from 'vue';
	export default {
		data(){
			return {
                radio:1,
				totastMsg:'',
                showTotast:false,
                topData:"",
                stuAllArr:[],
                submitArr:[],
                noSubmitArr:[]
			}
		},
		created() {
			this.INIT_STATE()
            let _this = this;
            let obj = getStore("currentWork");
			api.getDetailsOfAssignmentRecord(obj).then(response=>{
                    console.log(response.data.data)
                    _this.stuAllArr = response.data.data.studentAssignmentList;
                    _this.topData = response.data.data.truenumsMap;
                    _this.stuAllArr.forEach(element => {
                        if(element.type){
                            _this.submitArr.push(element);
                        }else{
                             _this.noSubmitArr.push(element);
                        }
                    });
			})
		},
		computed:{
            ...mapState(["userlogin"]),
            stuList:function(){
                if(this.radio == 1){
                    return this.stuAllArr;
                }else if(this.radio == 2){
                    return this.submitArr;
                }
                else if(this.radio == 3){
                    return this.noSubmitArr;
                }
            }
		},
		methods: {
			...mapMutations(["INIT_STATE"]),
			
			showTip(msg){				
					var that=this;
					this.totastMsg=msg;
					this.showTotast=true;
					setTimeout(function(){
						document.getElementsByClassName('totast')[0].style.backgroundColor='rgba(0,0,0,0)'
						setTimeout(function(){
							that.showTotast=false	
							document.getElementsByClassName('totast')[0].style.backgroundColor='rgba(0,0,0,0.5)'
						},800)
					},1000)
			}			
		}
	}
</script>

<style scoped>
	.banner{
        height: 40px;
        color: #ffffff;
        line-height: 40px;
        background: #14ACF4;
        overflow: hidden;
        font-size: 14px;
        margin-bottom: 10px;
    }
    .banner .left{
        float: left;
        margin-left: 48px;
    }
    .banner .right{
        float: right;
        margin-right: 48px;
    }
    .banner .right span{margin-left: 10px;}
    .header{text-align: center}
    .header>div{
            display: inline-block;
            width:80px;
            margin-right: 100px;
            text-align: center;
            color: #4A4A4A;
            font-size: 14px;
    }
    .header>div>span{
        font-size: 20px;
        color: #00C853;
    }
    .header>.middle>span{
        color: #14ACF4;
    }
    .header>.low>span{
        color: #F13D49;
    }
     .header>div>div i{
         display: inline-block;
         width: 14px;
         height: 14px;
         background: url(../../assets/images/top_logo.png)
     }
    .header>div>div .middle_logo{ background: url(../../assets/images/middle_logo.png)} 
    .header>div>div .low_logo{ background: url(../../assets/images/low_logo.png)} 
    .header .low{margin-right: 0}
    .content header{
        padding-left: 48px;
        height: 48px;
        background: #F5FAFC;
        line-height: 48px;
    }
    .content header>div{
        display: inline-block;
        width: 45%;
    }
    .content header>div>div{margin-left: 20px;}
    .content header>div>div>label{margin-left: 16px;}
    .content header div:nth-of-type(3){width: 9%;}
    .content ul{
         /* padding-left: 48px; */
    }
    .content ul li{
        padding-left: 48px;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #F2F2F2;
        font-size: 14px;
        color: #4A4A4A;
        text-align: center;
    }
    .content ul li div{
    	width: 45%;
    	display: inline-block;
    	text-align: left;
    }
    .content ul li div span{
        line-height: 24px;
         text-align: center;
         color: #ffffff;
        width: 48px;
        height: 24px;
        display: inline-block;
       background: #F55C66;
       border-radius: 2px;
    }
    .content ul li div .active{
        background: #14ACF4;
    }
    .content ul li div:nth-of-type(3){width: 9%;}
</style>